<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { useResizeObserver } from '@vueuse/core'
import {
  ChannelShare28Regular,
  ContentSettings20Regular,
  Settings20Regular,
  WindowConsole20Regular,
  BookSearch20Regular,
  DatabaseLink20Regular,
  Info20Regular,
} from '@vicons/fluent'
import { Icon } from '@vicons/utils'
import { isMobileMode } from '@/utils/detection'
import PanelSupplier from './PanelSupplier.vue'
import PanelGeneral from './PanelGeneral.vue'
import PanelPrompt from './PanelPrompt.vue'
import PanelMcp from './PanelMcp.vue'
import PanelKnowledge from './PanelKnowledge.vue'
import PanelData from './PanelData.vue'
import PanelAbout from './PanelAbout.vue'

const { t } = useI18n()

const emits = defineEmits(['close'])

// 状态参数
const state = reactive({
  // 是否手机端
  isMobile: false,
  // 当前激活的 tab
  currentTab: '',
  // 是否开启 modal
  showModal: false,
})

// 定义组件
const panelRef = ref()

useResizeObserver(document.body, () => {
  state.isMobile = isMobileMode()
})

// 开启窗口
const open = (tab: string = 'default') => {
  if (!['general', 'prompt', 'mcp', 'knowledge', 'data', 'about'].includes(tab)) {
    // 默认标签
    tab = 'supplier'
  }
  state.currentTab = tab
  state.showModal = true
}

// 切换标签
const handelTabChange = () => {
  // 关闭上一个标签
  if (panelRef.value?.onClose) {
    panelRef.value.onClose()
  }
}

// 关闭窗口
const handleClose = () => {
  state.showModal = false
  if (panelRef.value?.onClose) {
    panelRef.value.onClose()
  }
  emits('close')
}

defineExpose({
  open,
})
</script>
<template>
  <a-modal
    :class="{ 'mobile-mode': state.isMobile }"
    v-model:open="state.showModal"
    :title="t('setting.title')"
    width="1000px"
    :footer="false"
    :afterClose="handleClose"
  >
    <n-tabs
      class="mt-5"
      v-model:value="state.currentTab"
      type="line"
      :placement="state.isMobile ? 'top' : 'left'"
      @update:value="handelTabChange"
    >
      <n-tab-pane name="supplier">
        <template #tab>
          <div class="relative">
            <Icon class="icon"><ChannelShare28Regular /></Icon>
            <span class="pl-1">{{ t('setting.supplier.title') }}</span>
          </div>
        </template>
        <PanelSupplier ref="panelRef" :is-mobile="state.isMobile" />
      </n-tab-pane>
      <n-tab-pane name="prompt">
        <template #tab>
          <div class="relative">
            <Icon class="icon"><ContentSettings20Regular /></Icon>
            <span class="pl-1">{{ t('setting.prompt.title') }}</span>
          </div>
        </template>
        <PanelPrompt ref="panelRef" :is-mobile="state.isMobile" />
      </n-tab-pane>
      <n-tab-pane name="general">
        <template #tab>
          <div class="relative">
            <Icon class="icon"><Settings20Regular /></Icon>
            <span class="pl-1">{{ t('setting.general.title') }}</span>
          </div>
        </template>
        <PanelGeneral ref="panelRef" :is-mobile="state.isMobile" />
      </n-tab-pane>
      <n-tab-pane name="mcp">
        <template #tab>
          <div class="relative">
            <Icon class="icon"><WindowConsole20Regular /></Icon>
            <span class="pl-1">{{ t('setting.mcp.title') }}</span>
          </div>
        </template>
        <PanelMcp ref="panelRef" :is-mobile="state.isMobile" />
      </n-tab-pane>
      <n-tab-pane name="knowledge">
        <template #tab>
          <div class="relative">
            <Icon class="icon"><BookSearch20Regular /></Icon>
            <span class="pl-1">{{ t('setting.knowledge.title') }}</span>
          </div>
        </template>
        <PanelKnowledge ref="panelRef" :is-mobile="state.isMobile" />
      </n-tab-pane>
      <n-tab-pane name="data">
        <template #tab>
          <div class="relative">
            <Icon class="icon"><DatabaseLink20Regular /></Icon>
            <span class="pl-1">{{ t('setting.data.title') }}</span>
          </div>
        </template>
        <PanelData ref="panelRef" :is-mobile="state.isMobile" />
      </n-tab-pane>
      <n-tab-pane name="about">
        <template #tab>
          <div class="relative">
            <Icon class="icon"><Info20Regular /></Icon>
            <span class="pl-1">{{ t('setting.about.title') }}</span>
          </div>
        </template>
        <PanelAbout ref="panelRef" :is-mobile="state.isMobile" />
      </n-tab-pane>
    </n-tabs>
  </a-modal>
</template>
<style lang="scss" scoped>
.icon {
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
}
.mobile-mode {
  .relative {
    display: flex;
    align-items: center;
  }
  .icon {
    position: static;
    transform: translateY(0);
    margin-right: 3px;
  }
}
</style>
